<template>
  <div
    style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center"
  >
    <el-image
      :src="props.src"
      :fit="props.fit"
      :loading="props.loading"
      :lazy="props.lazy"
      :scroll-container="props.scrollContainer || undefined"
      :alt="props.alt"
      :referrer-policy="props.referrerPolicy"
      :hide-on-click-modal="props.hideOnClickModal"
      :preview-src-list="props.previewSrcList"
      :initial-index="props.initialIndex"
      :close-on-press-escape="props.closeOnPressEscape"
      :preview-teleported="props.previewTeleported"
      :style="getImageStyle()"
      @load="handleLoad"
      @error="handleError"
      @switch="handleSwitch"
      @close="handleClose"
    >
      <template #placeholder>
        <div class="image-slot">加载中...</div>
      </template>
      <template #error>
        <div class="image-slot">
          <el-icon><Picture /></el-icon>
          <span>加载失败</span>
        </div>
      </template>
    </el-image>
  </div>
</template>

<script setup lang="ts">
import { ElImage, ElIcon } from 'element-plus';
import { Picture } from '@element-plus/icons-vue';

const props = defineProps({
  src: {
    type: String,
    default: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
  },
  fit: {
    type: String as () => 'fill' | 'contain' | 'cover' | 'none' | 'scale-down',
    default: 'cover'
  },
  loading: {
    type: String as () => 'eager' | 'lazy',
    default: 'lazy'
  },
  lazy: {
    type: Boolean,
    default: false
  },
  scrollContainer: {
    type: [String, Object],
    default: undefined
  },
  alt: {
    type: String,
    default: ''
  },
  referrerPolicy: {
    type: String,
    default: ''
  },
  hideOnClickModal: {
    type: Boolean,
    default: false
  },
  previewSrcList: {
    type: Array as () => string[],
    default: () => []
  },
  initialIndex: {
    type: Number,
    default: 0
  },
  closeOnPressEscape: {
    type: Boolean,
    default: true
  },
  previewTeleported: {
    type: Boolean,
    default: false
  },
  width: {
    type: [String, Number],
    default: '100%'
  },
  height: {
    type: [String, Number],
    default: '100%'
  },
  borderRadius: {
    type: String,
    default: '0'
  }
});

const emit = defineEmits(['load', 'error', 'switch', 'close']);

const getImageStyle = () => {
  const style: Record<string, string> = {};

  if (props.width) {
    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width;
  }

  if (props.height) {
    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height;
  }

  if (props.borderRadius) {
    style.borderRadius = props.borderRadius.includes('px')
      ? props.borderRadius
      : `${props.borderRadius}px`;
  }

  return style;
};

const handleLoad = (event: Event) => {
  emit('load', event);
  console.log('Image loaded:', event);
};

const handleError = (event: Event) => {
  emit('error', event);
  console.log('Image load error:', event);
};

const handleSwitch = (index: number) => {
  emit('switch', index);
  console.log('Image switched to index:', index);
};

const handleClose = () => {
  emit('close');
  console.log('Image preview closed');
};
</script>

<style scoped>
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 14px;
}

.image-slot .el-icon {
  font-size: 30px;
  margin-bottom: 8px;
}
</style>
